<template>
  <el-dialog
    title="操作详情"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="cancelDialog"
    width="600px"
  >
    <div v-loading="loading">
      <el-form v-if="operateDetail.operatingType && operateDetail.operatingType.indexOf('编辑') !== -1" ref="operateDetail" class="gl_form_mini" :model="operateDetail" style="padding: 0 30px" label-width="100px">
        <el-form-item label="卡种类型">
          <div>{{ chooseChargeType(operateDetail.chargeTypeCode) }}</div>
        </el-form-item>
        <el-form-item label="卡种编号">
          <div>{{ operateDetail.cardNumber }}</div>
        </el-form-item>
        <el-form-item label="用户">
          <div>{{ operateDetail.studentName }}</div>
        </el-form-item>
        <el-form-item v-if="operateDetail.chargeTypeCode === 'ClassPeriod'" label="卡内课时">
          <div class="period">
            <div class="periodMinWidth">{{ operateDetail.oldRemainClassPeriod }}</div>
            <i class="el-icon-right" />
            <div class="periodMaxWidth gl_ft_weight">{{ operateDetail.newRemainClassPeriod }}</div>
          </div>
        </el-form-item>
        <el-form-item label="有效期">
          <div class="period">
            <div v-if="operateDetail.oldEffectiveDate" class="periodMinWidth">{{ operateDetail.oldEffectiveDate | FormatDate('yyyy-MM-dd') }}</div>
            <div v-else class="periodMinWidth" />
            <i class="el-icon-right" />
            <div v-if="operateDetail.newEffectiveDate" class="periodMaxWidth gl_ft_weight">{{ operateDetail.newEffectiveDate | FormatDate('yyyy-MM-dd') }}</div>
            <div v-else class="periodMaxWidth" />
          </div>
        </el-form-item>
        <el-form-item label="变更原因">
          <div>{{ operateDetail.operatingInfo }}</div>
        </el-form-item>
      </el-form>
      <div v-else>
        <div class="details">会籍卡激活</div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="cancelDialog">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      operateDetail: {}
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 操作chargeTypeCode
    chooseChargeType(chargeTypeCode) {
      let _chargeType;
      if (chargeTypeCode && this.dict && this.dict.chargeType) {
        _chargeType = this.dict.chargeType.find(item => item.code === chargeTypeCode);
      }
      _chargeType = _chargeType ? _chargeType.value : '';
      return `${_chargeType}`;
    },
    cancelDialog() {
      this.dialogVisible = false;
      this.operateDetail = {};
    }
  }
};
</script>

<style lang="scss" scoped>
.details {
  min-height: 120px;
  padding: 0 15px;
}
.period {
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .periodMinWidth {
    width: 140px;
  }
  .periodMaxWidth {
    width: 160px;
  }
}
</style>
